<template>
    <div class="message">
        <view v-if="historylist.length == 0" class="page_dcenter_null">
            <img
                class="page_dcenter_null_img"
                src="../../static/img_null_bookbuilding.png"
            />
            <view>暂无记录</view>
        </view>
        <scroll-view scroll-y class="pagses">
            <div
                class="ms_cat"
                @click="itemClick(item)"
                v-for="(item, index) in historylist"
                :key="index"
            >
                <div class="ms_title">
                    <div class="ms_title_l">
                        <span class="dians" v-if="item.readFlag == '0'"></span>
                        <span>{{ item.businessType }}</span>
                    </div>
                    <div class="ms_title_r">
                        <span>{{ item.sendTime }}</span>
                    </div>
                </div>
                <div class="ms_body">
                    <div class="ms_body_c">{{ timesiy(item) }}</div>
                </div>
                <div class="ms_butn" v-if="itme.skipType=='41'||itme.skipType=='31'">
                    <div class="ms_body_c">点击查看详情</div>
                    <div class="ms_body_l"></div>
                </div>
            </div>
        </scroll-view>
    </div>
</template>

<script>
export default {
    name:'homes',
    data() {
        return {
            isshou: "1",
            items: 10,
            message: "消息",
            historylist: [],
        };
    },

    mounted() {
        var _this = this;
       _this.getLists()
    },
    methods: {
        timesiy(itme){
             if (itme.skipType=='50') {
                 var str =JSON.parse(itme.templateParam)
                 return itme.sendContent.replace('*',str.keyword2.value)
             } else {
                 return itme.sendContent
             }
        },
        getLists() {
            var _this = this;
            _this.$ajaxs.get("/mobile/v1/pushRecord/getPushHistoryOfJG")
                .then((res) => {
                    if (res.status == 200) {
                        _this.historylist = res.content;
                    } else {
                        uni.showToast({
                            title: "请检查网络~",
                            icon: "none",
                        });
                    }
                })
                .catch((err) => reject(err));
        },
        itemClick(itme) {
            var _this = this;
           
            if(itme.skipType=='41'){
                 _this.$ajaxs.get("/mobile/v1/pushRecord/setAlreadyRead",{id:itme.id})
                .then((res) => {
                    if (res.status == 200) {
                      _this.getLists() 
                    }
                })
                .catch((err) => reject(err));
                uni.navigateTo({
                    url: "/pages/service/schedule/list",
                    animationType: "pop-in",
                    animationDuration: 200,
                });

            }
             if(itme.skipType=='31'){
                  _this.$ajaxs.get("/mobile/v1/pushRecord/setAlreadyRead",{id:itme.id})
                .then((res) => {
                    if (res.status == 200) {
                      _this.getLists() 
                    }
                })
                .catch((err) => reject(err));
                uni.navigateTo({
                    url: "/pages/service/fetalMonitoring",
                    animationType: "pop-in",
                    animationDuration: 200,
                });
            }
           
            
            
        },
    },
};
</script>

<style scoped lang="scss">
.message {
    // background: #f8f8f8;
    .page_dcenter_null {
        padding-top: 180upx;
        text-align: center;
        .page_dcenter_null_img {
            height: 180upx;
            width: 162upx;
        }
        div {
            color: #999;
            font-size: 28upx;
            height: 40upx;
            line-height: 40upx;
        }
    }
    .pagses {
        padding-bottom: 110upx;
        .ms_cat {
            background: #fff;
            margin: 22upx;
            color: #333;
            box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.19);
            border-radius: 12px;
            .ms_title {
                height: 60upx;
                line-height: 60upx;
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                padding: 0 40upx;
                color: #666;
                border-bottom: 1px solid #ddd;
                .ms_title_l {
                    -webkit-box-flex: 1;
                    -ms-flex: 1;
                    flex: 1;
                    align-items: center;
                    justify-content: center;

                    .red {
                        color: #fa4d93;
                    }
                    .dians {
                        vertical-align: middle;
                        display: inline-block;
                        width: 10upx;
                        height: 10upx;
                        border-radius: 50%;
                        background: #fa4d93;
                    }
                    span:nth-of-type(1) {
                        margin-right: 5upx;
                    }
                }
                .ms_title_r {
                    -webkit-box-flex: 1;
                    -ms-flex: 1;
                    flex: 1;
                    align-items: center;
                    justify-content: center;
                    vertical-align: middle;
                    text-align: right;
                }
            }
            .ms_body {
                padding: 40upx;
                border-bottom: 1px solid #ddd;
                .ms_body_c {
                    // vertical-align: middle;
                    // overflow: hidden;
                    // text-overflow: ellipsis;
                   text-indent: 2em;
                }
            }
            .ms_butn {
                height: 80upx;
                line-height: 80upx;
                padding: 0 40upx;
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                .ms_body_c {
                    -webkit-box-flex: 0 0 90%;
                    -ms-flex: 0 0 90%;
                    flex: 0 0 90%;
                    vertical-align: middle;
                }
                .ms_body_l {
                    -webkit-box-flex: 0 0 10%;
                    -ms-flex: 0 0 10%;
                    flex: 0 0 10%;
                    // width: 10upx;
                    vertical-align: middle;
                    position: relative;
                }
                .ms_body_l::after {
                    content: "";
                    position: absolute;
                    top: 50%;
                    margin-top: -7upx;
                    width: 14upx;
                    height: 14upx;
                    left: 40upx;
                    border-top: 2px solid #999;
                    border-right: 2px solid #999;
                    transform: rotate(45deg);
                }
            }
        }
    }
}
</style>